﻿@using BonjourQuotation.UI.Models.AccountModel
@model UserDetailsViewModel
@{
    ViewBag.Title = "Load User Details";
}
@using (@Html.BeginForm("SaveUserDetailData", "Account", FormMethod.Post, new { id = "LoadUserDetailsForm" }))
{
    <div id="ErrorMessagesDivPopUp">
        <label for="Validation" id="errorMessageClient" class="errorMessage"></label>
        @if (Model.Message != null)
        {
            @Html.LabelForModel(Model.Message, new { @class = "errorMessage", id = "errorMessageServer" })
        }
    </div>
    @Html.HiddenFor(model=>model.EmployeeID)
    @Html.HiddenFor(model => model.SelectedCity)
<div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.FirstName)</span>
                @Html.TextBoxFor(model => model.FirstName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength30 Required UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.LastName)</span>
                @Html.TextBoxFor(model => model.LastName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength30 Required UserDetailsElementChange" })
            </div>
        </div>      
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.MiddleName)</span>
                @Html.TextBoxFor(model => model.MiddleName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength30 UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Title)</span>
                @Html.TextBoxFor(model => model.Title, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength20 UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.DepartmentName)</span>
                @Html.DropDownListFor(model => model.SelectedDepartmentName, new SelectList(Model.DepartmentName, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation Required UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.EmailName)</span>
                @Html.TextBoxFor(model => model.EmailName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation Email UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Sex)</span>
                @Html.DropDownListFor(model => model.SelectedSex, new SelectList(Model.Sex, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation Required UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Extension)</span>
                @Html.TextBoxFor(model => model.Extension, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength4 UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.HomePhone)</span>
                @Html.TextBoxFor(model => model.HomePhone, new { @class = "table_inputs_SmallPadding2 inpputgr form-control UserDetailsElementChange" })
            </div>
        </div>
    </div>    
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.SocialSecurityNumber)</span>
                @Html.TextBoxFor(model => model.SocialSecurityNumber, new { @class = "table_inputs_SmallPadding2 inpputgr form-control SSNumber UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-4">
            <span style="font-style:italic">Reports To:</span>
            <div id="UserEmpReports" style="border-width: 2px; height: 85px; border-style: groove; border: 1px solid #ccc; overflow-y: auto; ">
                @Html.CheckBoxListFor(model => model.SelectedSupervisors,
                                      model => model.Supervisors,
                                      Rep => Rep.Id,
                                      Rep => Rep.Name,
                                      model => model.SelSupervisors,
                                      MvcCheckBoxList.Model.Position.Vertical,
                                      x => new { @class = "UserDetailsElementChange" })
            </div>
        </div>

        <div class="ElementsPaddingRight30 col-lg-4">
            <span style ="font-style:italic">Quota Region:</span>
            <div id="UserQuotRegions" style="border-width: 2px; height: 85px; border-style: groove; border: 1px solid #ccc; overflow-y: auto; ">
                @Html.CheckBoxListFor(model => model.SelectedQuotaRegions,
                                      model => model.QuotaRegion,
                                      Reg => Reg.Id,
                                      Reg => Reg.Name,
                                      model => model.QuotaSelRegions,
                                      MvcCheckBoxList.Model.Position.Vertical,
                                      x => new { @class = "UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.SelectedLCountryID)</span>
                @Html.DropDownListFor(model => model.SelectedLCountryID, new SelectList(Model.LCountry, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation CountryDrop Required UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Address)</span>
                @Html.TextBoxFor(model => model.Address, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength100 UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6" id="CityDiv" @(((Model.SelectedLCountryID == "1" && (Model.SelectedStateID == "" || Model.SelectedStateID == null)) || Model.SelectedLCountryID == "") ? new { @style = "Display:None" } : new { @style = "Display:block" })>
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.CityID)</span>
                @Html.DropDownListFor(model => model.CityID, new SelectList(Model.City, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control CityDrop UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6" id="CityDivChange" @(((Model.SelectedLCountryID == "1" && (Model.SelectedStateID == "" || Model.SelectedStateID == null)) || Model.SelectedLCountryID == "") ? new { @style = "Display:block" } : new { @style = "Display:None" })>
        </div>
        <div class="ElementsPaddingRight30 col-lg-3" id="StateDiv" @((Model.SelectedLCountryID != "1" || Model.SelectedLCountryID == "") ? new { @style = "Display:None" } : new { @style = "Display:block" })>
            <div class="input-group">
                @Html.DropDownListFor(model => model.SelectedStateID, new SelectList(Model.StateID, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control StateDrop UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-3" id="StateDivChange" @((Model.SelectedLCountryID != "1" || Model.SelectedLCountryID == "") ? new { @style = "Display:block" } : new { @style = "Display:None" })>
        </div>
        <div class="ElementsPaddingRight30 col-lg-3">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.PostalCode)</span>
                @Html.TextBoxFor(model => model.PostalCode, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength20 UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.BirthDate)</span>
                @Html.TextBoxFor(model => model.BirthDate, new { @class = "table_inputs_SmallPadding2 inpputgr form-control UserDeteilsDataCalendar ElementsForValidation Date UserDetailsElementChange", @style = "cursor:pointer" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.SelectedCountry)</span>
                @Html.DropDownListFor(model => model.SelectedCountry, new SelectList(Model.Country, "Value", "Text"), "Select", new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation Required UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-4">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.DateHired)</span>
                @Html.TextBoxFor(model => model.DateHired, new { @class = "table_inputs_SmallPadding2 inpputgr form-control UserDeteilsDataCalendar ElementsForValidation Date UserDetailsElementChange", @style = "cursor:pointer" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.EmrgcyContactName)</span>
                @Html.TextBoxFor(model => model.EmrgcyContactName, new { @class = "table_inputs_SmallPadding2 inpputgr form-control ElementsForValidation MaxLength50 UserDetailsElementChange" })
            </div>
        </div>
        <div class="ElementsPaddingRight30 col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.EmrgcyContactPhone)</span>
                @Html.TextBoxFor(model => model.EmrgcyContactPhone, new { @class = "table_inputs_SmallPadding2 inpputgr form-control UserDetailsElementChange" })
            </div>
        </div>
    </div>
    <div class="row form-row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Active)</span>
                @Html.CheckBoxFor(model => model.Active, new { @class = "UserDetailsElementChange" })
            </div>
        </div>
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">Unformatted:</span>
                <input type="checkbox" id="PhoneNumberUnformatted">
            </div>
        </div>
    </div>
        <div class="row form-row">
            <div class="ElementsPaddingRight30 col-lg-12">
                <div class="input-group">
                    <span class="input-group-addon inpputgrtext table_inputs_SmallPadding2 inpputgrback">@Html.LabelFor(model => model.Note)</span>
                    @Html.TextAreaFor(model => model.Note, new { @class = "table_inputs_SmallPadding2 inpputgr form-control UserDetailsElementChange" })
                </div>
            </div>
        </div>
    <div class ="SaveCancelDiv">
        <button class="btn14 btn50" type="button" onclick="$('#cboxClose').click()">Cancel</button>
        @if(Model.MenuManageEmployeeEdit)
        { 
            <button class="btn14 btn50" type="button" id="UserDetailsSaveBtn">Save</button>
        }
        else
        { 
            <button class="btn14 btn50 disabled" type="button" disabled="disabled" id="UserDetailsSaveBtn">Save</button>
        }
    </div>
</div>
}





